<template>
  <div v-if="data.length > 0" class="conjoined-super-banner">
    <div v-for="(items, key) in groupData" :key="key" class="double-capsule">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="double-capsule-item"
        @click="handleItemClick(item, index)"
      >
        <div class="title">
          <span>{{ item.mainTitle }}</span>
          <img
            class="label"
            alt=""
            :src="formatImgUrl(item.resourceLabelImg)"
          />
        </div>
        <div class="sub-title">
          <span :style="`color: ${item.subTitleColor}`">{{
            item.subTitle
          }}</span>
        </div>
        <div class="images">
          <img
            v-for="(image, index) in transImages(item.imgUrl)"
            :key="index"
            class="image"
            :src="formatImgUrl(image)"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import { http2https, formatImgUrl } from '@/utils/util';

export default {
  name: 'conjoined-super-banner',
  props: {
    moduleType: {
      type: Number,
      default: 1
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    groupData() {
      return _.groupBy(this.data, iteratee => iteratee.resourceLocation);
    }
  },
  methods: {
    formatLabelImgUrl(imgUrl) {
      const width = 120;
      const height = 48;
      if (imgUrl) {
        imgUrl = formatImgUrl(imgUrl, width, height);
        return http2https(imgUrl);
      }
      return '';
    },
    formatImgUrl(imgUrl) {
      const width = 146;
      const height = 146;
      if (imgUrl) {
        imgUrl = formatImgUrl(imgUrl, width, height);
        return http2https(imgUrl);
      }
      return '';
    },
    transImages(imgUrl) {
      return imgUrl.split(',');
    },
    handleItemClick(...params) {
      this.$emit('click', ...params);
    }
  }
};
</script>

<style lang="scss" scoped>
.conjoined-super-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    bottom: 0;
    width: 1px;
    background: rgba(233, 233, 233, 1);
    @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.5) {
      transform: scaleX(0.5);
    }
    @media (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleX(0.5);
    }
    z-index: 1;
  }
  .double-capsule {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:not(:last-child) {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: rgba(233, 233, 233, 1);
        @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.5) {
          transform: scaleY(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3) {
          transform: scaleY(0.5);
        }
        z-index: 1;
      }
    }

    .double-capsule-item {
      position: relative;
      flex: 1;
      height: 143px;
      padding: 14px;
      background: rgba(255, 255, 255, 1);
      box-sizing: border-box;

      .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        margin-bottom: 6px;

        .label {
          margin-left: 4px;
          width: 40px;
          height: 16px;
          border-radius: 8px;
        }
      }
      .sub-title {
        margin-bottom: 8px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 16, 16, 1);
        line-height: 12px;
      }
      .images {
        display: flex;
        .image {
          width: 73px;
          height: 73px;
          border-radius: 6px;
        }
        .image + .image {
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
